class Food
{
    constructor(el) 
    {
        this.el = el             // 保存map地图对象
        this.size = 20           // 保存食物的宽高属性
        this.foodObj = null
        this.foodObjLeft = 0
        this.foodObjTop = 0
    }

    // 在Food构造函数的原型对象上增加create方法
    create() 
    {
        /**
         * 注意：
         * 行内块级元素需要宽高边距时，利用display:block
         * 一个块级元素和另一个块级元素在同行显示时，利用float或者flex
         * 一个块级元素在另外一个块级元素上面时，利用position定位，父用relative，子用absolute
        */
        // 步骤：
        // 1、创建div标签对象
        let divObj = document.createElement('div')

        // 2、设置样式（w20/h20/bg:springgreen/position:absolute）
        divObj.style.width = 20 + 'px'
        divObj.style.height = 20 + 'px'
        divObj.style.backgroundColor = 'springgreen'
        divObj.style.position = 'absolute'
        // 不要在这里写divObj的left和top，因为后期食物被吃掉了，需要单独搞一个move方法，随机left和top
        // 单独保存一下食物对象
        this.foodObj = divObj         // 构造函数里面需要存一下foodObj
        // 3、在食物div页面显示(需要父标签对象，所以要在构造函数中存一个map标签对象this.el)
        this.el.appendChild(divObj)
        // 4、默认移动食物（即随机显示在map盒模型中）
        this.move()
    }

    move() 
    {
        // 留心：每次刷新页面，食物的位置不一样
        // left和top一开始是0，而当食物被吃掉之后是变化的，所以这里不能写死，需要在构造函数里面存一下left和top的初始值0
        // map总宽度为800px,总高度为400px，初始化left和top都是0，占据一个格，left最大为780，top最大为380，所以left最多可以在移39个格子
        let foodObjLeftMaxMoveNUm = ( this.el.clientWidth / this.size ) - 1     // 39
        let foodObjTopMaxMoveNUm = ( this.el.clientHeight / this.size ) - 1     // 19
        // 食物最小移动的格子数为0
        // 随机移动食物
        this.foodObjLeft = Math.floor( Math.random() * (foodObjLeftMaxMoveNUm - 0 + 1) + 0 ) * this.size
        this.foodObjTop = Math.floor( Math.random() * (foodObjTopMaxMoveNUm - 0 + 1) + 0 ) * this.size
        
        this.foodObj.style.left = this.foodObjLeft + 'px'
        this.foodObj.style.top = this.foodObjTop + 'px'
    }
}